<template>
  <div class="number-info">
    <div class="top-info">
      <div class="title">
        <span>
          {{winningNumbers.previous.dateNo}}
        </span>
        <span>
          期开奖号码
        </span>
      </div>
      <div class="number-bar">
        <text-bar :content="winningNumbers.previous.context"></text-bar>
      </div>
    </div>
    <div class="bottom-info">
      <div class="numbers">
        <span 
          v-for="(number, index) in winningNumbers.previous.numbers.split(',')" 
          :key="index"
          class="ball ball-unselected"
          :class="addClass(number)"
          >
          {{number}}
        </span>
        <span class="eq">=</span>
        <span class="sum">{{sum(winningNumbers.previous.numbers.split(','))}}</span>
      </div>
    </div>
  </div> 
</template>

<script>
import TextBar from '@/components/base/text-bar/text-bar'
const red = [1,2,7,8,12,13,18,19,23,24,29,30,34,35,40,45,46]
const green = [5,6,11,16,17,21,22,27,28,32,33,38,39,43,44,49]
const blue = [3,4,9,10,14,15,20,25,26,31,36,37,41,42,47,48]
export default {
  components: {
    TextBar 
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return  {
          id: 3,
          lotteryName: '香港六合彩',
          icon: '',
          previous: {
            dateNo: '819048',
            numbers: '8,8,6,7,4,1',
            context:'大，小，单，双，全',
          }
        }
      }
    }
  },
  methods: {
    addClass(number) {
      let num = parseInt(number)
      let className = ''
      if (red.indexOf(num) > -1) {
        className = 'red'  
      } else if (green.indexOf(num) > -1) {
        className = 'green'
      } else if(blue.indexOf(num) > -1) {
        className = 'blue'
      } else {
        className = ''
      }
      return className
    },
    sum(item){
      let s = 0;
      for( var i = 0; i < item.length; i++ ){
        s += parseInt(item[i])
      }
      return s
    }
  },
  computed: {
    color() {

    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .number-info  
      .top-info 
        display flex
        align-items center
        margin-bottom 12px
        .number-bar 
          margin-left 10px
      .bottom-info
        .numbers 
          display flex
          align-items center 
          .ball 
            width 36px 
            height 36px 
            display flex 
            box-sizing border-box 
            align-items center 
            justify-content center 
            border-radius 50%
            margin-right 10px
            font-size 16px 
            font-family ArialMT
            box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.2)
            &.red 
              color #fff 
              background linear-gradient(180deg, #f34343, $color-ball-red) 
              border 2px solid rgba($color-ball-red, 0.9)
            &.green 
              color #fff 
              background linear-gradient(180deg, #6be20b, $color-ball-green) 
              border 2px solid rgba($color-ball-green, 0.9)
            &.blue 
              color #fff 
              background linear-gradient(180deg, #00e7f8, $color-ball-blue) 
              border 2px solid rgba($color-ball-blue, 0.9)
          .eq 
            font-size 15 
            font-weight 700 
            margin-right 10px
          .sum 
            font-weight 700
            
</style>